// 云盘管理
<template>
  <div>
    <div class="clearFix">
      <div class="btn">
        <el-button type="primary" class="iconfont"
          ><span class="icon">&#xe621;</span>上传</el-button
        >
        <el-button class="iconfont">
          <span class="icon">&#xe63e;</span>新建
        </el-button>
      </div>
      <div class="input">
        <el-input style="width: 350px" placeholder="搜索你的文件"></el-input>
        <el-button type="primary" class="iconfont search">&#xe6d9;</el-button>
      </div>
    </div>
    <el-table :data="nowData" border style="width: 100%">
      <el-table-column align="left" prop="fileName" label="文件名" width="80">
      </el-table-column>
      <el-table-column align="left" prop="name"> </el-table-column>
      <el-table-column align="left" prop="fileSize" label="大小">
      </el-table-column>
      <el-table-column align="left" prop="uploader" label="上传人">
      </el-table-column>
      <el-table-column align="left" prop="time" label="修改日期">
      </el-table-column>
      <el-table-column align="left" label="操作" width="180">
        <template slot-scope="scope">
          <div class="iconfont">
            <span class="downloadCSS" @click="download(scope.row)"
              >&#xe602;</span
            >
            <el-popover placement="top" trigger="hover">
              <el-button size="mini" @click="againName(scope.row)"
                >重命名</el-button
              >
              <el-button size="mini" @click="moveReach(scope.row)"
                >移动到</el-button
              >
              <el-button size="mini" @click="deleteData(scope.row)"
                >删除</el-button
              >
              <span slot="reference" class="iconfont threePoints"
                >&#xe601;</span
              >
            </el-popover>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="changePage"
      background
      layout="prev, pager, next"
      :current-page="nowPage"
      :page-count="maxPage"
      align="right"
    >
    </el-pagination>
  </div>
</template>

<script>
import tableMainin from "../utils/myMixin";
export default {
  name: "CloudPage",
  components: {},
  mixins: [tableMainin],
  data() {
    return {
      visible: false,
      Datashuju: [
        {
          fileName: 22,
          name: "工地上面的视屏",
          fileSize: "200M",
          uploader: "张三",
          time: "2020-10-01 14:00",
        },
        {
          fileName: 1122,
          name: "工地上面的视屏",
          fileSize: "200M",
          uploader: "张三",
          time: "2020-10-01 14:00",
        },
      ],
      getCloudData() {
        this.$axios
          .get("http://47.100.30.12:8080/cloud/cloudIn", {
            params: {
              currentPage: 1,
              pageSize: 5,
            },
          })
          .then((data) => {
            console.log(data.data);
          });
      },
    };
  },
  computed: {},
  methods: {
    tableshuju() {
      this.tableData = this.Datashuju;
    },
    //删除
    deleteData(row) {
      this.$confirm("是否确认删除该班组付款申请", "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(row.fileName);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //重命名
    againName() {
      console.log("重命名");
    },
    //移动到
    moveReach() {
      console.log("移动到");
    },
    //下载
    download(row) {
      console.log(row);
    },
  },
  created() {
    this.tableshuju();
    // this.getCloudData();
  },
};
</script>
<style scoped lang='less'>
.icon {
  margin-right: 5px;
}
.btn {
  float: left;
}
.input {
  float: right;
}
.el-table {
  font-size: 12px;
  color: rgb(122, 120, 120);
  margin: 50px 0;
}

.downloadCSS {
  font-size: 20px;
  cursor: pointer;
}
.downloadCSS:hover,
.threePoints:hover {
  color: #2c72e7;
}
.threePoints {
  cursor: pointer;
  margin-left: 20%;
  font-size: 20px;
  font-weight: bold;
}
</style>